function rectangle(ctx,xCord,yCord,width,height){
	this.c = ctx
	this.x = xCord;
	this.y = yCord;
	this.w = width;
	this.h = height;
	
	this.col = "blue";
	this.filled = true;
	
	this.draw = draw;
	function draw(){
	
		this.c.beginPath();
		this.c.rect(this.x,this.y,this.w,this.h);
		this.c.fillStyle = this.col;
		if(this.filled){
			this.c.fill();
		}
		this.c.stroke();
	}
};

$(document).ready(function(){
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	var myObjects = new Array();
	var drawing = false;
	var x = 0;
    var y = 0;
	
	$("#myCanvas").mousedown(function(e){
		x = e.pageX - this.offsetLeft;
		y = e.pageY - this.offsetTop;
		object = new rectangle(context,x,y,0,0);
		object.draw();
		myObjects.push(object);
		drawing = true;
	});
	
	$("#myCanvas").mousemove(function(e){
		if(drawing){
			var newWidth = e.pageX - this.offsetLeft - x;
			var newHeight = e.pageY - this.offsetTop - y;
			myObjects[(myObjects.length - 1)] = new rectangle(context,x,y,newWidth,newHeight);
			context.clearRect(0, 0, canvas.width, canvas.height);
			for (var i = 0;i < myObjects.length; i++){
				myObjects[i].draw();
			}
		}
	});
	
	$("#myCanvas").mouseup(function(e){
		drawing = false;
	});
	
	$("#redraw").mousedown(function(e){
		context.clearRect(0, 0, canvas.width, canvas.height);
		for (var i = 0;i < myObjects.length; i++){
			myObjects[i].draw();
		}
	});
});
